<template>
	<view>
		<TopHead :title="'卡券列表'"></TopHead>
		<view class="tabbar-box">
			<view class="bar-item" :class="indxId==index?'barActive':''" v-for="(item,index) in barList" :key="index"
				@click="choose(item,index)">
				<text>{{item.title}}</text>
				<text></text>
			</view>
		</view>
		<view class="conbox">
			<view class="quanlist">
				<view class="popup-item" v-for="(item,index) in list" :key="index">
					<text class="tag">店铺优惠券</text>
					<view class="numer" ><text>￥</text>{{(item.template.certificatePrice/100)||0}}</view>
			 					<view class="popup-item-text" :class="item.status==2?'popup-item-text2':''">
						<view>{{item.template.templateName}}</view>
						<view>卡号：{{item.certificateId}}</view>
						<view>有效期至：{{item.certificateEndDate}}</view>
					</view>
					<view class="syBtn" v-if="item.status==2">立即使用</view>
					<view class="syBtn syBtn1" v-else-if="item.status==3">已使用
						<text class="quan1"></text>
						<text class="quan2"></text>
						<text class="quan3"></text>
						<text class="quan4"></text>
					</view>
					<view class="syBtn" v-else>
						<image class="overdue-icon" src="../../static/images/overdue-icon.png"></image>
					</view>
				</view>
				<view class="wushuju" v-if="list.length<1">暂无数据</view>
			</view>
		</view>
	</view>
</template>

<script>
	import TopHead from '../../components/topHead/topHead.vue';
	export default {
		components: {
			TopHead
		},
		data() {
			return {
				barList: [{
						title: '全部',
						id: ''
					},
					{
						title: '未使用',
						id: '2'
					},
					{
						title: '已使用',
						id: '3'
					},
					{
						title: '已过期',
						id: '-1'
					}
				],
				indxId: 0, // 
				cocupponList: [{
						title: '满100使用（仅限一次）',
						id: 1,
						sta: 1,
						time: '2024.03.28 23:59:29'
					},
					{
						title: '满100使用（仅限一次）',
						id: 2,
						sta: 2,
						time: '2024.03.28 23:59:29'
					},
					{
						title: '满100使用（仅限一次）',
						id: 3,
						sta: 3,
						time: '2024.03.28 23:59:29'
					},
				],
				list: [], // 列表
				page: 1,
				pageSize: 20, // 
				total: 0, // 总数
				status: '', // 筛选卡券

			}
		},
		onLoad() {

		},
		onShow() {
			this.page = 1
			this.total = 0
			this.list = []
			this.initData()
			
		},
		onReachBottom() {
			// 触底分页
			console.log('触底')
			if (this.total > this.list.length) {
				this.page = parseInt(this.page) + 1
				this.initData()
			}
		},
		methods: {
			// 数据请求示例
			initData() {
				let _this = this;
				let userId = uni.getStorageSync('id')
				let data = {
					status: _this.status,
					page: _this.page,
					pageSize: _this.pageSize,
					userId: userId
				}
				_this.$http.fetchData({
					url: '/wechatApplet/customer/certificate/',
					method: 'GET',
					data: data,
					success(res) {
						_this.list = res.data.list
						_this.total = res.data.total
						console.log("list==>",_this.list);

					}
				})
			},
			// 去详情
			toOrderDetails(id) {
				console.log(id)
				uni.navigateTo({
					url: `/pages/order/orderDetails?id=${id}`
				})
			},
			// 取消订单
			cancelOrder(item) {
				console.log(item)
			},
			// 去付款
			goPay(item) {
				console.log(item)
			},
			choose(item,index) {
				console.log(item)
				this.indxId = index
				this.status = item.id
				this.initData()
			},


		}
	}
</script>

<style scoped>
	.headBox {
		font-size: 36rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Bold;
		font-weight: 700;
		text-align: center;
		color: #232323;
		padding-top: 88rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;
		padding-bottom: 112rpx;
		background: linear-gradient(89deg, #f9d7a6 1%, #ffdc95 100%);
	}

	.headBox .wzText {
		line-height: 56rpx;
	}

	.tabbar-box {
		padding: 30rpx;
		background: #f3f3f3;
		position: fixed;
		display: flex;
		top: 173rpx;
		left: 0;
		right: 0;
		z-index: 99;
	}

	.bar-item {
		font-size: 28rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Regular;
		font-weight: 400;
		color: #000000;
		flex: 1;
		margin-right: 34rpx;
		text-align: center;
	}

	.tabbar-box .bar-item:last-child {
		margin-right: 0;
	}

	.bar-item>text:nth-child(1) {}

	.bar-item>text:nth-child(2) {
		width: 35%;
		height: 8rpx;
		display: block;
		margin: 0 auto;
		margin-top: 9rpx;
	}

	.tabbar-box .barActive {
		font-size: 28rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Bold;
		font-weight: 700;
		color: #e47917;
	}

	.tabbar-box .barActive>text:last-child {
		background: #e47917;
		border-radius: 4rpx;
	}

	.conbox {
		padding: 30rpx;
		padding-top: 290rpx;

	}

	.quanlist {
		padding: 30rpx 5rpx;
		/* height: 590rpx;
		overflow-y: auto; */
	}

	.popup-item {
		background: #fffbf3;
		border-radius: 10rpx;
		box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(93, 69, 41, 0.25);
		padding-left: 170rpx;
		position: relative;
		margin-bottom: 18rpx;
		display: flex;
	}

	.popup-item .tag {
		display: inline-block;
		background: #ffe6d1;
		border-radius: 10rpx 0rpx 10rpx 0rpx;
		padding: 0 16rpx;
		line-height: 42rpx;
		text-align: center;
		font-size: 24rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Regular;
		font-weight: 400;
		color: #e67817;
		position: absolute;
		top: 0;
		left: 0;
	}

	.popup-item .numer {
		font-size: 48rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Bold;
		font-weight: 700;
		color: #f61111;
		position: absolute;
		left: 0rpx;
		bottom: 36rpx;
	}

	.popup-item .numer text {
		font-size: 28rpx;
	}

	.popup-item .popup-item-text {
		font-size: 24rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Regular;
		font-weight: 400;
		color: #e67817;
		flex: 1;
		padding-top: 47rpx;
		padding-bottom: 36rpx;

	}

	.popup-item .popup-item-text2 {
		border-right: 2rpx dashed #e67817;
	}

	.popup-item .popup-item-text>view:first-child {
		margin-bottom: 14rpx;
	}

	.popup-item .syBtn {
		width: 160rpx;
		flex-shrink: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Regular;
		font-weight: 400;
		color: #e67817;
		position: relative;
		z-index: 3;
	}

	.popup-item .syBtn1 {
		font-size: 24rpx;
		transform: rotate(-30deg);
	}

	.quan1 {
		width: 68rpx;
		height: 68rpx;
		border: 2rpx solid #e47917;
		border-radius: 50%;
		position: absolute;
		top: 50%;
		left: 50%;
		margin-top: -34rpx;
		margin-left: -34rpx;
		display: block;
		box-sizing: border-box;
	}

	.quan2 {
		width: 88rpx;
		height: 88rpx;
		border: 2rpx solid #e47917;
		border-radius: 50%;
		position: absolute;
		top: 50%;
		left: 50%;
		margin-top: -44rpx;
		margin-left: -44rpx;
		display: block;
		box-sizing: border-box;
	}

	.quan3 {
		width: 96rpx;
		height: 96rpx;
		border: 2rpx solid #e47917;
		border-radius: 50%;
		position: absolute;
		top: 50%;
		left: 50%;
		margin-top: -48rpx;
		margin-left: -48rpx;
		display: block;
		box-sizing: border-box;
	}

	.quan4 {
		width: 116rpx;
		height: 46rpx;
		background: #ffe6d1;
		border-radius: 5rpx;
		position: absolute;
		top: 50%;
		left: 50%;
		margin-top: -23rpx;
		margin-left: -58rpx;
		z-index: -1;
	}

	.overdue-icon {
		width: 132rpx;
		height: 100rpx;
	}
	.wushuju {
		text-align: center;
		font-size: 26rpx;
		margin-top: 60rpx;
		color: #999;
	}
</style>